<template>
  <div class="language-selector">
    <el-form-item :label="label" :prop="prop" :error="error">
      <div class="language-select-wrapper">
        <el-select
          v-model="selectedLanguages"
          multiple
          :placeholder="placeholder"
          style="width: 100%"
          filterable
          :disabled="disabled"
          collapse-tags
          collapse-tags-tooltip
          @change="handleChange"
        >
          <el-option
            v-for="lang in filteredLanguages"
            :key="lang.countryId"
            :label="lang.countryLanguage + ' (' + lang.countryName + ')'"
            :value="lang.countryLanguage"
          />
        </el-select>
        <el-button
          type="primary"
          size="small"
          @click="selectAll"
          :disabled="disabled"
          class="select-all-btn"
        >
          全选
        </el-button>
        <el-button
          type="info"
          size="small"
          @click="clearAll"
          :disabled="disabled || selectedLanguages.length === 0"
          class="select-all-btn"
        >
          全不选
        </el-button>
      </div>
    </el-form-item>
    <div v-if="showIncludeSource" class="include-source-option">
      <el-switch
        v-model="includeSourceLanguage"
        :disabled="disabled"
        @change="handleIncludeSourceChange"
      />
      <span class="option-hint">包含源语言</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'
import type { LanguageOption } from '../../api/drama'

interface Props {
  modelValue: string[]
  availableLanguages: LanguageOption[]
  sourceLanguage: string
  includeSourceLanguage: boolean
  label?: string
  prop?: string
  placeholder?: string
  disabled?: boolean
  error?: string
  showIncludeSource?: boolean
}

interface Emits {
  (e: 'update:modelValue', value: string[]): void
  (e: 'update:includeSourceLanguage', value: boolean): void
}

const props = withDefaults(defineProps<Props>(), {
  label: '目标语言',
  placeholder: '选择语言',
  disabled: false,
  showIncludeSource: true
})

const emit = defineEmits<Emits>()

const selectedLanguages = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const includeSourceLanguage = computed({
  get: () => props.includeSourceLanguage,
  set: (value) => emit('update:includeSourceLanguage', value)
})

const filteredLanguages = computed(() => {
  if (props.includeSourceLanguage) {
    return props.availableLanguages
  }
  return props.availableLanguages.filter(lang => 
    lang.countryLanguage !== props.sourceLanguage
  )
})

const selectAll = () => {
  selectedLanguages.value = filteredLanguages.value.map(lang => lang.countryLanguage)
}

const clearAll = () => {
  selectedLanguages.value = []
}

const handleChange = () => {
  // 语言选择变化时的处理逻辑
}

const handleIncludeSourceChange = (include: boolean) => {
  if (!include) {
    // 如果不包含源语言，从已选择的语言中移除源语言
    selectedLanguages.value = selectedLanguages.value.filter(
      lang => lang !== props.sourceLanguage
    )
  }
}

// 监听源语言变化，自动更新已选择的语言
watch(() => props.sourceLanguage, (newSourceLang) => {
  if (!props.includeSourceLanguage) {
    selectedLanguages.value = selectedLanguages.value.filter(
      lang => lang !== newSourceLang
    )
  }
})
</script>

<style scoped>
/* 语言选择器容器 */
.language-selector {
  position: relative;
}

.language-select-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.language-select-wrapper .el-select {
  flex-grow: 1;
  min-width: 200px;
}

/* 选择器 - 简洁 */
:deep(.el-select) {
  border-radius: 6px;
}

:deep(.el-select .el-input__wrapper) {
  border-radius: 6px;
  border: 1px solid #d1d5db;
  transition: all 0.2s ease;
}

:deep(.el-select .el-input__wrapper:hover) {
  border-color: #94a3b8;
}

:deep(.el-select .el-input__wrapper.is-focus) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1);
}

/* 按钮 - 简洁 */
.select-all-btn {
  margin: 0 !important;
  border-radius: 4px;
  font-weight: 500;
  padding: 6px 12px;
  font-size: 13px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.select-all-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 包含源语言选项 */
.include-source-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}

.include-source-option:hover {
  background: #f1f5f9;
  border-color: #d1d5db;
}

/* 开关 - 简洁 */
:deep(.el-switch) {
  transform: scale(1);
}

:deep(.el-switch__core) {
  border-radius: 12px;
  background: #e5e7eb;
  border: 1px solid #d1d5db;
}

:deep(.el-switch.is-checked .el-switch__core) {
  background: #3b82f6;
  border-color: #3b82f6;
}

:deep(.el-switch__action) {
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* 提示文字 */
.option-hint {
  font-size: 13px;
  color: #6b7280;
  font-weight: 400;
}

/* 错误状态 */
:deep(.el-form-item.is-error) .language-select-wrapper {
  animation: shake 0.3s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* 下拉选项 - 简洁 */
:deep(.el-select-dropdown__item) {
  border-radius: 4px;
  margin: 1px 4px;
  transition: all 0.15s ease;
}

:deep(.el-select-dropdown__item:hover) {
  background: #f3f4f6;
  color: #3b82f6;
}

:deep(.el-select-dropdown__item.selected) {
  background: #eff6ff;
  color: #3b82f6;
  font-weight: 500;
}

/* 多选标签 - 简洁 */
:deep(.el-select__tags) {
  padding: 2px 4px;
}

:deep(.el-tag) {
  border-radius: 4px;
  padding: 2px 8px;
  font-weight: 500;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  margin: 1px;
}

:deep(.el-tag .el-tag__close) {
  color: #6b7280;
  font-size: 12px;
}

:deep(.el-tag .el-tag__close:hover) {
  color: #374151;
  background: rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .language-select-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  
  .language-select-wrapper .el-select {
    min-width: auto;
  }
  
  .select-all-btn {
    width: 100%;
    margin-top: 6px !important;
  }
}
</style>